<template lang="html">
	<div :class="['banner']" v-if="slides.length > 0">
		<swiper :options="bannerOption" @slideChange="slideChange" ref="bannerSwiper">
			<!-- slides -->
			<swiper-slide v-for="(slide,index) in slides" :key="index">
				<div @click="rejectTo(slide)" class="banner--img">
					<img style='height:100%' :src="slide.pictureUrl" alt="">
				</div>
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination" v-if="slides.length > 1"></div>
		</swiper>
	</div>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import api from 'api/api'
	export default {
		data() {
			return {
				bannerOption: {
					autoplay: true,
					slidesPerView: 'auto',
					loop: true,
					spaceBetween: 8,
					pagination: {
						el: '.swiper-pagination'
					}
				},
				activeIndex: 0,
				fadeOut: false,
				slides: []
			}
		},
		created() {
			this.getBanner()
		},
		computed: {
			...mapState(['activityDetails', 'immersions', 'version', 'brand']),
			swiper() {
				return this.$refs.bannerSwiper.swiper
			}
		},
		watch: {

		},
		methods: {
			getBanner() {
				api.getBanner().then(res => {
					this.slides = this.slides.concat(res.data)
					console.log(this.slides)
				})
			},
			slideChange() {
				this.activeIndex = this.swiper.activeIndex
			},
			touchStart() {
				this.fadeOut = true
			},
			transitionEnd() {
				setTimeout(() => {
					this.fadeOut = false
				}, 300)
			},
			rejectTo(item) {
				if (item.linkType == 1012) {
					window.location.href = item.linkUrl
				} else {
					this.$router.push({
						path: '/service/good/' + item.goodsId
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "assets/scss/index.scss";
	@import "assets/scss/Common/banner.scss";
</style>
